<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
    data1: {
        type: Array,
        default: () => [],
    },
    data2: {
        type: Array,
        default: () => [],
    },
    data3: {
        type: Array,
        default: () => [],
    },
    
})

const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
    grid: {
        top: '15%',
        left: '1%',
        right: '1%',
        bottom: '0%',
        containLabel: true,
    },
    legend: {
        // itemGap: 50,
        top: '-3%',
        data: ['23.1-11', '22.1-11', '变化'],
        textStyle: {
            color: '#f9f9f9',
            borderColor: '#fff'
        },
    },
    xAxis: [{
        type: 'category',
        boundaryGap: true,
        axisLine: { //坐标轴轴线相关设置。数学上的x轴
            show: false,
            lineStyle: {
                color: '#f9f9f9'
            },
        },
        axisLabel: { //坐标轴刻度标签的相关设置
            textStyle: {
                color: '#d1e6eb',
                margin: 15,
            },
        },
        axisTick: {
            show: false,
        },
        data: ['技术开发', '技术服务', '技术咨询', '技术转让', '技术许可'],
    }],
    yAxis: [
        {
            type: 'value',
            min: 0,
            // max: 140,
            splitNumber: 7,
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#0a3256'
                }
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                // margin: 20,
                textStyle: {
                    color: 'rgb(148,159,167)',

                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108, 128, 151, 0.3)',
                },
            },
        },
        {
            type: 'value',
            // min: 0,
            // max: 140,
            splitNumber: 7,
            axisLine: {
                show: false,
            },
            axisLabel: {
                // margin: 20,
                textStyle: {
                    color: 'rgb(148,159,167)',

                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108, 128, 151, 0.3)',
                },
            },
        }
    ],
    series: [
        {
            name: '23.1-11',
            type: 'bar',
            barWidth: 15,
            label: {
                show: false,
                position: 'top',
                textStyle: {
                    color: '#fff',
                }
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#15E0FF',
                        },
                        {
                            offset: 1,
                            color: '#159AFF',
                        },
                    ]),
                },
            },
            data: props.data1,
            
            yAxisIndex: 0,
        },
        {
            name: '22.1-11',
            type: 'bar',
            barWidth: 15,
            label: {
                show: false,
                position: 'top',
                textStyle: {
                    color: '#fff',
                }
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#15FFC5',
                        },
                        {
                            offset: 1,
                            color: '#15F7FF',
                        },
                    ]),
                },
            },
            data: props.data2,
          
            yAxisIndex: 0,
        },
        {
            name: '变化',
            type: 'line',
            // smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 6,
            lineStyle: {
                normal: {
                    color: "#FF8F1F", // 线条颜色
                },
                borderColor: '#f0f'
            },
            label: {
                show: false,
                position: 'top',
                textStyle: {
                    color: '#ffff',
                }
            },
            itemStyle: {
                normal: {
                    color: "#FF8F1F",

                }
            },
            data: props.data3,
            yAxisIndex: 1,
        },
    ]
};
// const option = {
//     // backgroundColor: {
//     //     type: 'linear',
//     //     x: 0,
//     //     y: 0,
//     //     x2: 1,
//     //     y2: 1,
//     //     colorStops: [{
//     //         offset: 0,
//     //         color: '#0f2c70' // 0% 处的颜色
//     //     }, {
//     //         offset: 1,
//     //         color: '#091732' // 100% 处的颜色
//     //     }],
//     //     globalCoord: false // 缺省为 false
//     // },
//     // title: {
//     //     text: '品种',
//     //     x: 'center',
//     //     y: 'center',
//     //     textStyle: {
//     //         color: '#fff'
//     //     }
//     // },
//     tooltip: {
//         trigger: 'item',
//         // borderColor: 'rgba(255,255,255,.3)',
//         // backgroundColor: 'rgba(13,5,30,.6)',
//         borderWidth: 1,
//         padding: 5,
//         formatter: function (parms) {
//             var str = parms.marker + "" + parms.data.name + "</br>" +
//                 "数量：" + parms.data.value + "</br>" +
//                 "占比：" + parms.percent + "%";
//             return str;
//         }
//     },
//     legend: {
//         // type: "scroll",
//         // orient: 'vertical',
//         // left: 'middle',
//         // align: 'auto',
//         // top: 'middle',
//         bottom: 'bottom',
//         width:'300px',
//         textStyle: {
//             color: '#fff'
//         },

//         data: ["未评价", "国内领先", "国际领先", "国际先进", "国内一般", "国内先进"]
//     },
//     series: [{
//         type: 'pie',
//         z: 3,
//         center: ['50%', '40%'],
//         radius: ['20%', '40%'],
//         clockwise: true,
//         avoidLabelOverlap: true,
//         hoverOffset: 15,
//         itemStyle: {
//             normal: {
//                 color: function (params) {
//                     return ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'][params.dataIndex]
//                 }
//             }
//         },
//         label: {
//             show: true,
//             position: 'outside',
//             formatter: '{a|{b}：{d}%}\n{hr|}',
//             normal: {
//                     // position: 'top',
//                     // fontSize: '24',
//                     color: '#D8D8D8',
//                 },
//             rich: {
//                 hr: {
//                     backgroundColor: 't',
//                     borderRadius: 3,
//                     width: 3,
//                     height: 3,
//                     padding: [3, 3, 0, -12]
//                 },
//                 a: {
//                     padding: [-30, 15, -20, 15]
//                 }
//             }
//         },
//         labelLine: {
//             normal: {
//                 length: 20,
//                 length2: 30,
//                 lineStyle: {
//                     width: 1
//                 }
//             }
//         },
//         data: [{
//             name: "未评价",
//             value: "142.0"
//         }, {
//             name: "国内领先",
//             value: "271.0"
//         }, {
//             name: "国际领先",
//             value: "44.0"
//         }, {
//             name: "国际先进",
//             value: "200.0"
//         }, {
//             name: "国内一般",
//             value: "32.0"
//         }, {
//             name: "国内先进",
//             value: "59.0"
//         }]
//     }, {
//         name: '第一层环',
//         type: 'pie',
//         z: 2,
//         tooltip: {
//             show: false
//         },
//         center: ['50%', '40%'],
//         radius: ['40%', '50%'],
//         hoverAnimation: false,
//         clockWise: false,
//         itemStyle: {
//             normal: {
//                 // shadowBlur: 40,
//                 // shadowColor: 'rgba(0, 255, 255,.3)',
//                 color: 'rgba(1,15,80,.4)',
//             },
//             emphasis: {
//                 color: 'rgba(1,15,80,.4)',
//             }
//         },
//         label: {
//             show: false
//         },
//         data: [100]
//     }, {
//         name: '第二层环',
//         type: 'pie',
//         z: 1,
//         tooltip: {
//             show: false
//         },
//         center: ['50%', '40%'],
//         radius: ['50%', '70%'],
//         hoverAnimation: false,
//         clockWise: false,
//         itemStyle: {
//             normal: {
//                 // shadowBlur: 40,
//                 // shadowColor: 'rgba(0, 255, 255,.3)',
//                 color: 'rgba(2,60,85,.2)',
//             },
//             emphasis: {
//                 color: 'rgba(2,60,85,.2)',
//             }
//         },
//         label: {
//             show: false
//         },
//         data: [100]
//     }]
// }
const chart = ref()
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
